<template>
    <GlobalHeader
    text="&nbsp;&nbsp;主机工况参数
	(货油主机+2#泵)"
      xh="CW6250C1360DF7"
      xlh="2522L000025"
      :hour="10"
    ></GlobalHeader>
    <view class="bj-content" style="display: flex; justify-content: center;width:100%;height:100%">
      <Gauge min="0" max="1000" :value="hyMainItemData('z401', 0)" style="width: 80%; height:50%;"></Gauge>

      <view class="parmar">
        <view>
          <text>主机滑油:</text>
          <text>{{ hyMainItemData("z406", 1) }}℃</text>
          <text>{{ hyMainItemData("z405", 2) }}bar</text>
        </view>
        <view>
          <text>主机冷却水:</text>
          <text>{{ hyMainItemData("z407", 1) }}℃</text>
        </view>
        <view>
          <text>主机排气:</text>
          <text>{{ hyMainItemData("z408", 1) }}℃</text>
        </view>
        <view>
          <text>泵体温度:</text>
          <text>{{ hyMainItemData("z609", 1) }}℃</text>
        </view>
        <view>
          <text>泵轴承温度:</text>
          <text>{{ hyMainItemData("z610", 1) }}℃</text>
          <text>{{ hyMainItemData("z611", 1) }}℃</text>
        </view>
        <view>
          <text>泵轴温度:</text>
          <text>{{ hyMainItemData("z612", 1) }}℃</text>
        </view>
        <view>
          <text>泵进口压力:</text>
          <text>{{ hyMainItemData("z613", 2) }}bar</text>
        </view>
        <view>
          <text>泵出口压力:</text>
          <text>{{ hyMainItemData("z614", 2) }}bar</text>
        </view>
      </view>
    </view>

</template>

<script setup>
import GlobalHeader from "@/components/layout/GlobalHeader.vue";
import { initDecimalPlaces } from "@/utils/utils.js";
import Gauge from "@/components/echats/gauge";
import { ref, computed, watch, inject } from 'vue';

let allData = inject("allData");
let hy_main = ref(null);

watch(
  () => allData.value,
  (newVal, oldVal) => {
    let hyMainInitData = { ...newVal.hy_main } || {};
    let hybInitData = { ...newVal.hyb } || {};
    hy_main.value = Object.assign(hyMainInitData, hybInitData);
  },
  {
    deep: true,
  }
);

let hyMainItemData = computed(() => {
  return (no, num) => {
    if (!hy_main.value) return initDecimalPlaces(num);
    let value = hy_main.value[no]?.currentValue;
    return value;
  };
});
</script>


<style scoped lang="scss">
.bj-content {
 
  flex-direction: column;  /* 改为垂直排列 */
  align-items: center;     /* 水平居中 */
}

.parmar {
  font-size: 32rpx;
  color: #fff;
  margin-left: 0;         /* 移除右侧边距 */
  width: 100%;       /* 限制最大宽度 */
  padding: 20rpx;          /* 添加内边距 */

  view {
    display: flex;        /* 改为弹性布局 */
    margin: 10px 0;       /* 垂直间距 */
    align-items: center;  /* 垂直居中 */
  }

  text {
    display: inline-block;
  }

  text:nth-child(1) {
    width: 25%; /* 左侧标签宽度 */
    text-align: left;    /* 右对齐 */
    margin-right: 15%;   /* 增加间距 */
  }

  text:nth-child(2),
  text:nth-child(3) {
    width: 30%;         /* 数值宽度 */
    text-align: left;     /* 左对齐 */
  }

  text:nth-child(3) {
    //margin-left: 20px;    /* 第三个参数左间距 */
  }
}
</style>